<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
      <el-tab-pane v-for="(group, index) in groups" :key="index" :label="group.groupName" :name="group.groupKey">
        <el-form style="width: 500px;" label-width="120px">
          <el-form-item v-for="(item, x) in configs" :key="x" :label="item.label">
            <el-switch v-if="item.type == 'BOOLEAN'" v-model="item.value" />
            <el-input v-else-if="item.type == 'INTEGER' || item.type == 'FLOAT'" v-model="item.value" :type="item.type == 'INTEGER' || item.type == 'FLOAT' ? 'number' : 'text'" />
            <el-input v-else-if="item.type == 'TEXTAREA'" v-model="item.value" type="textarea" />
            <div v-else-if="item.type === 'JSON'" :data="JSON.stringify(item)">

            </div>
            <div v-else-if="item.type=='FILE'"></div>
            <div v-else-if="item.type=='IMAGE'"></div>
            <el-input v-else v-model="item.value" />
            <span style="color: red;"> {{ item.remark }}</span>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSubmit">立即修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '',
      groups: [],
      configs: []
    }
  },
  created() {
    this.getGroupList()
  },

  methods: {
    getGroupList() {
      this.$api.get('/api/system/configGroup').then((res) => {
        this.groups = res.data
        this.activeName = this.groups[0].groupKey
        this.getConfigList()
      })
    },
    getConfigList() {
      this.$api.get('/api/system/config', { groupKey: this.activeName }).then((res) => {
        this.configs = res.data
      })
    },
    handleTabClick(tab) {
      this.configs = []
      this.getConfigList()
    },
    handleSubmit() {
      this.$api.put('/api/system/config', {}, { list: this.configs }).then((res) => {})
    }
  }
}
</script>

<style></style>
